<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>dubbo接口在线调试工具</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css"/>
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="font-size: 34px">
                        DUBBO DEBUGGER
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="row" style="margin-top: 10px">
        <form class="form-horizontal" role="form">
            <div class="row">
                <div class="col-lg-10">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="protocol" class="col-sm-4 control-label">protocol:</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="protocol">
                                    <option>zookeeper</option>
                                    <option>redis</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="address" class="col-sm-3 control-label">address:</label>
                            <div class="col-sm-9">
                                <input class="form-control" id="address" type="text" placeholder="127.0.0.1:2181">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="protocolFilter" class="col-sm-6 control-label">protocolFilter:</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="protocolFilter">
                                    <option>dubbo</option>
                                    <option>thrift</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="col-sm-8">
                                <button class="form-control btn btn-primary" id="submit" data-loading-text="Loading..."
                                        type="button" autocomplete="off">
                                    确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div><!-- /.row -->

    <div style=" border: solid; margin-top: 15px;height: 1000px;    border-width: 0 2px;border-right-width: 0; border-color: #a2a2a2 #b0b0b0;   padding-left: 5px; color: #333333">
        <div class="row" style="height: max-content;">

            <div class="col-md-3">
                <div class="list-group" id="service-list">
                </div>
            </div>

            <div class="col-md-9">
                <iframe name="interface-list" scrolling="auto" width="100%" height="1000px"></iframe>
            </div>

        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="/js/sweetalert.min.js"></script>
<script>


    $("#submit").on("click", function () {
        const $btn = $(this).button('loading');
        const protocol = $("#protocol").val();
        const address = $("#address").val();
        const protocolFilter = $("#protocolFilter").val();
        $.ajax({
            url: '/base/service/list?cProtocol=' + protocol + '&cAddress=' + address + '&protocolFilter=' + protocolFilter,
            type: 'GET',
            success: function (data) {
                $btn.button('reset');
                if (data.flag) {
                    const services = data.data.services;
                    const size = services.length;
                    $("#service-list").empty();
                    $.each(services, function (n, value) {
                        const name = value.cName;
                        const protocol = value.cProtocol;
                        const address = value.cAddress;
                        const registryId = value.cRegistryId;
                        const url = '/page/interface/list?cRegistryId=' + registryId + '&cAddress=' + address + '&cProtocol=' + protocol;
                        $("#service-list").append(" <a  class='list-group-item' id='service" + n + "' onclick='active(" + n + "," + size + ")'  href='" + url + "' target='interface-list'>\n" +
                            "                    <h5 class='list-group-item-heading'>" + name + "</h5>\n" +
                            "                    <p class='list-group-item-text'>" + protocol + "://" + address + "</p>\n" +
                            "                </a>\n" +
                            "                <br/>");

                    });
                } else {
                    swal(data.msg);
                }
            }
        });
        //
    });

    function active(n, size) {
        for (let i = 0; i < size; i++) {
            $('#service' + i).removeClass("active");
        }
        $('#service' + n).addClass("active");
    }

</script>
</html>